<template>
    <div class="container">
        <div class="hotel-head">
            <div class="hotel-title">选择旅行社<img class="hotel-cancel" src="../../../assets/image/home/icon-delete.png"
                                               @click="tomade"></div>
            <input class="hotel-search" v-model="keyword" placeholder="搜索" @keyup.enter="searchagency">
            <!--            <div class="hotel-classify">-->
            <!--                <div class="classify-list active">酒店</div>-->
            <!--                <div class="classify-list">名宿</div>-->
            <!--            </div>-->
        </div>
        <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
            <div v-if="agencyllist && agencyllist.length" class="hotel-body">
                <div class="hotel-list" v-for="item in agencyllist" @click="selectagency(item)">
                    <img class="hotel-list-left" :src="item.image">
                    <div class="hotel-list-right">
                        <div class="hotel-list-title">{{item.name}}</div>
                        <div class="hotrl-list-introduction">{{item.brief}}</div>
                    </div>
                </div>
            </div>
            <empty-record v-else-if="agencyllist && !agencyllist.length"></empty-record>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    import EmptyRecord from '../../../components/EmptyRecord'
    import {getTraveluser} from '../../../api/travel'
    import {mapState, mapMutations, mapActions} from 'vuex'

    export default {
        name: 'Teatravelagency',
        data() {
            return {
                params: {'page': 0, 'per_page': 10},
                loading: false, // 是否加载更多
                isMore: true, // 是否有更多
                agencyllist: false, // 酒店列表
                keyword: '', //关键字
            }
        },
        components: {
            EmptyRecord
        },
        computed: {
            ...mapState({
                user: state => state.member.info,
            })
        },
        mounted() {

        },
        methods: {
            ...mapMutations({
                saveagency: 'saveagency',
            }),
            // 前往路线定制
            tomade() {
                this.$router.back()
            },
            // 加载数据
            loadMore() {
                this.loading = true;
                this.params.page = ++this.params.page;
                if (this.isMore) {
                    this.loading = false;
                    this.getTraveluser()
                }
            },
            //获取线路列表
            getTraveluser() {
                getTraveluser(this.params, this.keyword).then(res => {

                    if (res.result.length < this.params.per_page) {
                        this.isMore = false
                    } else {
                        this.isMore = true
                    }
                    if (this.agencyllist) {
                        this.agencyllist = this.agencyllist.concat(res.result)
                    } else {
                        this.agencyllist = res.result
                    }

                }).catch(function (error) {
                    Toast(error.message)
                })
            },
            //搜索
            searchagency() {
                this.params.page = 0;
                this.loading = false;
                this.isMore = true;
                this.agencyllist = false;
                this.loadMore()
            },
            //选择旅行社
            selectagency(data){
                this.saveagency(data);
                this.$router.back()
            },
        }
    }
</script>

<style scoped lang="scss">
    .hotel-head {
        background: $primaryColor;
        padding: 20px;

        .hotel-title {
            position: relative;
            font-size: .8rem;
            font-weight: bold;
            text-align: center;
            padding: 20px 0;
            color: white;

            .hotel-cancel {
                position: absolute;
                left: 0;
                top: 20px;
                width: 23px;
                height: 23px;
            }
        }

        .hotel-search {
            display: block;
            width: 70vw;
            margin: auto;
            padding: 8px 10px;
            border-radius: 100px;
            border: none;
            text-align: center;
            font-size: .7rem;
        }

        /*.hotel-classify {*/
        /*    width: 150px;*/
        /*    margin: auto;*/
        /*    display: flex;*/
        /*    flex-direction: row;*/
        /*    align-items: center;*/
        /*    justify-content: space-around;*/

        /*    .classify-list {*/
        /*        color: white;*/
        /*        font-size: .7rem;*/
        /*        font-weight: bold;*/
        /*        border-bottom: 2px solid transparent;*/
        /*        padding: 20px 0 10px 0;*/
        /*    }*/

        /*    .active {*/
        /*        border-bottom: 2px solid white;*/
        /*    }*/
        /*}*/
    }

    .hotel-body {
        display: flex;
        flex-direction: column;
        background: white;

        .hotel-list {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid #EEEFF2;

            .hotel-list-left {
                width: 20vw;
                height: 20vw;
            }

            .hotel-list-right {
                height: 20vw;
                margin-left: 20px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                .hotel-list-title {
                    font-size: .8rem;
                    font-weight: bold;
                }

                .hotrl-list-introduction {
                    font-size: .7rem;
                    color: #B5B5B5;
                }
            }
        }


    }
</style>
